/**
 * @description 表格页面对应的属性组件
 */

import React, { useEffect, useMemo, useState, useContext, useRef } from 'react'
import { Collapse, Form, Select, Input, Radio, Divider, Tooltip } from 'antd';
import {
  InfoCircleOutlined
} from '@ant-design/icons';


import { setAttrForm } from '@/utils/AttrForm';
import { debounce } from 'lodash-es'

import { FlagOptions, iconTextReg } from '@/utils/Const';
import { UpdateContext } from '@/store/updateContext';

import CssEdit from '@/components/Monaco/CssEidt';
import AttrHeaderBtn from '../components/AttrHeaderBtn';


import StyleModule from '@/utils/StyleModule';
import { copyTemplate, pasteTemplate_2026 } from '@/utils/clipboard';

const titleShowOptions = [
  {
    label: '开',
    value: true
  },
  {
    label: '关',
    value: false
  }
]

const alignOptions = [
  {
    label: '左',
    value: 'left'
  },
  {
    label: '居中',
    value: 'center'
  },
  {
    label: '右',
    value: 'right'
  },
]

function ListAtrr({ template2, onConfigEvent, setIsRightAttr, actKey }) {

  const updateCtx = useContext(UpdateContext)
  const [form] = Form.useForm()
  // css编辑器
  const [open, setOpen] = useState(false)
  // css编辑器实例
  const cssEditRef = useRef()



  // 组件css变化
  let cssChange = (value) => {
    form.setFieldValue('css', value)
    StyleModule.update(actKey, value)
  }

  // input组件onChange事件防抖
  let onConfigEvent_debounce = debounce((keys, newValue) => {
    onConfigEvent(keys, newValue)
  }, 300)


  // 图标输入框变化事件，比普通输入框，多一个字符串转化逻辑
  let iconEvent = (keys, value) => {

    // 去除 空格、<、/> 
    let newValue = value.replace(iconTextReg, '')
    form.setFieldValue(keys, newValue)

    onConfigEvent(keys, newValue)
  }


  // 头部按钮事件
  let handleHeaderEvent = (key) => {
    switch (key) {

      // 打开组件css编辑
      case 'css':
        setOpen(true)
        break;

      // 复制模板
      case 'copy':
        copyTemplate(actKey, [], form)
        break;

      // 黏贴模板
      case 'paste':
        pasteTemplate_2026(form, onConfigEvent, actKey)
        updateCtx.setUpdateFlag(pre => !pre)

        // 修改css编辑器的值
        cssEditRef.current.setValue(form.getFieldValue('css'))
        break;

      // 切换位置
      case 'position':
        setIsRightAttr((isRight) => !isRight)
        break;

      default:
        break;
    }
  }

  // 属性栏右上角按钮事件
  let handleAttrEvent = (eventKey, blockKey, paramKeys, classKey) => {
    switch (eventKey) {

      // 复制模块
      case 'copy':
        copyBlock(actKey, blockKey, paramKeys, classKey, form)
        break;

      // 黏贴模块
      case 'paste':
        pasteBlock(actKey, blockKey, paramKeys, classKey, form, onConfigEvent)
        updateCtx.setUpdateFlag(pre => !pre)
        break;


      default:
        break;
    }
  }

  // -----------------------------------
  // 构造折叠面板的数据
  // -----------------------------------
  let items = useMemo(() => {
    let items = [

      {
        key: 'search',
        label: '搜索',
        children: <>
          <Form.Item
            label="标签开关"
            name={['search', 'base', 'labelFlag']}
          >
            <Radio.Group
              options={FlagOptions}
              onChange={(e) => onConfigEvent(['search', 'base', 'labelFlag'], e.target.value)}
              optionType="button"
              buttonStyle="solid"
            />
          </Form.Item>
          <Form.Item
            label="冒号开关"
            name={['search', 'base', 'colonFlag']}
          >
            <Radio.Group
              options={FlagOptions}
              onChange={(e) => onConfigEvent(['search', 'base', 'colonFlag'], e.target.value)}
              optionType="button"
              buttonStyle="solid"
            />
          </Form.Item>
          <Form.Item
            label="查询按钮文本"
            name={['search', 'base', 'search_text']}
          >
            <Input
              onChange={(e) => onConfigEvent(['search', 'base', 'search_text'], e.target.value)}
            />
          </Form.Item>
          <Form.Item
            label="查询按钮图标"
            name={['search', 'base', 'search_icon']}
          >
            <Input
              onChange={(e) => iconEvent(['search', 'base', 'search_icon'], e.target.value)}
            />
          </Form.Item>

        </>
      },
      {
        key: 'btn',
        label: '头部按钮',
        children: <Collapse accordion size='middle' items={[
          {
            key: 'icon',
            label: '图标',
            children: <>

              <Form.Item
                label="图标开关"
                name={['base', 'headerIconFlag']}
              >
                <Radio.Group
                  options={FlagOptions}
                  onChange={(e) => onConfigEvent(['base', 'headerIconFlag'], e.target.value)}
                  optionType="button"
                  buttonStyle="solid"
                />
              </Form.Item >

              <Form.Item
                label="新增"
                name={['base', 'header_icon_add']}
              >
                <Input
                  onChange={(e) => iconEvent(['base', 'header_icon_add'], e.target.value)}
                />
              </Form.Item>

              <Form.Item
                label="删除"
                name={['base', 'header_icon_deletes']}
              >
                <Input
                  onChange={(e) => iconEvent(['base', 'header_icon_deletes'], e.target.value)}
                />
              </Form.Item>

              <Form.Item
                label="其它"
                name={['base', 'header_icon_others']}
              >
                <Input
                  onChange={(e) => iconEvent(['base', 'header_icon_others'], e.target.value)}
                />
              </Form.Item>
            </>
          },
          {
            key: "text",
            label: "文本",
            children: <>
              <Form.Item
                label="新增"
                name={['base', 'header_text_add']}
              >
                <Input
                  onChange={(e) => onConfigEvent_debounce(['base', 'header_text_add'], e.target.value)}
                />
              </Form.Item>
              <Form.Item
                label="删除"
                name={['base', 'header_text_deletes']}
              >
                <Input
                  onChange={(e) => onConfigEvent_debounce(['base', 'header_text_deletes'], e.target.value)}
                />
              </Form.Item>
            </>
          },
        ]}
        />
      },
      {
        key: 'table',
        label: '表格',
        children: <Collapse accordion size='middle' items={[
          {
            key: 'config',
            label:
              <Tooltip title='配置 对齐、颜色、字体'>
                基础属性
                <InfoCircleOutlined className='tooltip-icon' />
              </Tooltip>
            ,
            children:
              <>
                <Form.Item
                  label="对齐方式"
                  name={['base', 'table_config', 'align']}
                >
                  <Select
                    options={alignOptions}
                    onChange={(value) => onConfigEvent(['base', 'table_config', 'align'], value)}
                  >
                  </Select>
                </Form.Item >
                <Form.Item
                  label="背景"
                  name={['base', 'table_config', 'colorBgContainer']}
                >
                  <Input
                    onChange={(e) => onConfigEvent_debounce(['base', 'table_config', 'colorBgContainer'], e.target.value)}
                  />
                </Form.Item>

                <Form.Item
                  label="字体色"
                  name={['base', 'table_config', 'colorText']}
                >
                  <Input
                    onChange={(e) => onConfigEvent_debounce(['base', 'table_config', 'colorText'], e.target.value)}
                  />
                </Form.Item>
                <Form.Item
                  label="字体大小"
                  name={['base', 'table_config', 'fontSize']}
                >
                  <Input
                    onChange={(e) => onConfigEvent_debounce(['base', 'table_config', 'fontSize'], e.target.value)}
                  />
                </Form.Item>

                <Divider plain>表头</Divider>

                <Form.Item
                  label="背景"
                  name={['base', 'table_config', 'headerBg']}
                >
                  <Input
                    onChange={(e) => onConfigEvent_debounce(['base', 'table_config', 'headerBg'], e.target.value)}
                  />
                </Form.Item>

                <Form.Item
                  label="文字颜色"
                  name={['base', 'table_config', 'headerColor']}
                >
                  <Input
                    onChange={(e) => onConfigEvent_debounce(['base', 'table_config', 'headerColor'], e.target.value)}
                  />
                </Form.Item>

                <Form.Item
                  label="	排序激活态背景色"
                  name={['base', 'table_config', 'headerSortActiveBg']}
                >
                  <Input
                    onChange={(e) => onConfigEvent_debounce(['base', 'table_config', 'headerSortActiveBg'], e.target.value)}
                  />
                </Form.Item>

                <Form.Item
                  label="	排序激活态悬浮背景色"
                  name={['base', 'table_config', 'headerSortHoverBg']}
                >
                  <Input
                    onChange={(e) => onConfigEvent_debounce(['base', 'table_config', 'headerSortHoverBg'], e.target.value)}
                  />
                </Form.Item>

                <Form.Item
                  label="	分割线颜色"
                  name={['base', 'table_config', 'headerSplitColor']}
                >
                  <Input
                    onChange={(e) => onConfigEvent_debounce(['base', 'table_config', 'headerSplitColor'], e.target.value)}
                  />
                </Form.Item>
                <Form.Item
                  label="	圆角"
                  name={['base', 'table_config', 'headerBorderRadius']}
                >
                  <Input
                    onChange={(e) => onConfigEvent_debounce(['base', 'table_config', 'headerBorderRadius'], e.target.value)}
                  />
                </Form.Item>

                <Divider plain>表格</Divider>
                <Form.Item
                  label="	行悬浮背景色"
                  name={['base', 'table_config', 'rowHoverBg']}
                >
                  <Input
                    onChange={(e) => onConfigEvent_debounce(['base', 'table_config', 'rowHoverBg'], e.target.value)}
                  />
                </Form.Item>
                <Form.Item
                  label="行选中背景色"
                  name={['base', 'table_config', 'rowSelectedBg']}
                >
                  <Input
                    onChange={(e) => onConfigEvent_debounce(['base', 'table_config', 'rowSelectedBg'], e.target.value)}
                  />
                </Form.Item>
                <Form.Item
                  label="	行选中悬浮背景色"
                  name={['base', 'table_config', 'rowSelectedHoverBg']}
                >
                  <Input
                    onChange={(e) => onConfigEvent_debounce(['base', 'table_config', 'rowSelectedHoverBg'], e.target.value)}
                  />
                </Form.Item>
                <Form.Item
                  label="	选择列宽度"
                  name={['base', 'table_config', 'selectionColumnWidth']}
                >
                  <Input
                    onChange={(e) => onConfigEvent_debounce(['base', 'table_config', 'selectionColumnWidth'], e.target.value)}
                  />
                </Form.Item>

              </>
          },

          {
            key: 'table-btn',
            label: '操作按钮',
            children: <Collapse accordion size='middle' items={[
              {
                key: 'icon',
                label: '图标',
                children: <>

                  <Form.Item
                    label="图标开关"
                    name={['base', 'tableIconFlag']}
                  >
                    <Radio.Group
                      options={FlagOptions}
                      onChange={(e) => onConfigEvent(['base', 'tableIconFlag'], e.target.value)}
                      optionType="button"
                      buttonStyle="solid"
                    />
                  </Form.Item >

                  <Form.Item
                    label="查看"
                    name={['base', 'table_icon_view']}
                  >
                    <Input
                      onChange={(e) => iconEvent(['base', 'table_icon_view'], e.target.value)}
                    />
                  </Form.Item>

                  <Form.Item
                    label="删除"
                    name={['base', 'table_icon_delete']}
                  >
                    <Input
                      onChange={(e) => iconEvent(['base', 'table_icon_delete'], e.target.value)}
                    />
                  </Form.Item>

                  <Form.Item
                    label="修改"
                    name={['base', 'table_icon_edit']}
                  >
                    <Input
                      onChange={(e) => iconEvent(['base', 'table_icon_edit'], e.target.value)}
                    />
                  </Form.Item>

                  <Form.Item
                    label="其它"
                    name={['base', 'table_icon_others']}
                  >
                    <Input
                      onChange={(e) => iconEvent(['base', 'table_icon_others'], e.target.value)}
                    />
                  </Form.Item>
                </>
              },
              {
                key: "text",
                label: "文本",
                children: <>
                  <Form.Item
                    label="查看"
                    name={['base', 'table_text_view']}
                  >
                    <Input
                      onChange={(e) => onConfigEvent_debounce(['base', 'table_text_view'], e.target.value)}
                    />
                  </Form.Item>
                  <Form.Item
                    label="删除"
                    name={['base', 'table_text_delete']}
                  >
                    <Input
                      onChange={(e) => onConfigEvent_debounce(['base', 'table_text_delete'], e.target.value)}
                    />
                  </Form.Item>
                  <Form.Item
                    label="修改"
                    name={['base', 'table_text_edit']}
                  >
                    <Input
                      onChange={(e) => onConfigEvent_debounce(['base', 'table_text_edit'], e.target.value)}
                    />
                  </Form.Item>
                </>
              },

            ]} />
          },
        ]}
        />
      },
      {
        key: 'pagination',
        label: '分页',
        children:
          <>
            <Form.Item
              label="上一页文字"
              name={['pagination', 'base', 'prev']}
            >
              <Input
                onChange={(e) => onConfigEvent_debounce(['pagination', 'base', 'prev'], e.target.value)}
              />
            </Form.Item>

            <Form.Item
              label="下一页文字"
              name={['pagination', 'base', 'next']}
            >
              <Input
                onChange={(e) => onConfigEvent_debounce(['pagination', 'base', 'next'], e.target.value)}
              />
            </Form.Item>

            <Form.Item
              label="一页时是否隐藏"
              name={['pagination', 'base', 'hideOnSinglePage']}
            >
              <Radio.Group
                options={FlagOptions}
                onChange={(e) => onConfigEvent(['pagination', 'base', 'hideOnSinglePage'], e.target.value)}
                optionType="button"
                buttonStyle="solid"
              />
            </Form.Item >

            <Form.Item
              label="是否展示 每页条数"
              name={['pagination', 'base', 'showSizeChanger']}
            >
              <Radio.Group
                options={FlagOptions}
                onChange={(e) => onConfigEvent(['pagination', 'base', 'showSizeChanger'], e.target.value)}
                optionType="button"
                buttonStyle="solid"
              />
            </Form.Item >
          </>

      },
    ]
    return items
  }, [
    updateCtx.updateFlag
  ])

  useEffect(() => {
    setAttrForm(form)
  }, [form])

  return (
    <>
      <Form
        name='list'
        form={form}
        initialValues={template2}
        labelCol={{
          span: 8,
        }
        }
        autoComplete="off"
        spellCheck="false"
      >

        {/* 按钮区域 */}
        <AttrHeaderBtn onClickEvent={handleHeaderEvent} />

        {/* 对象形式的样式编辑 */}
        <Collapse accordion destroyInactivePanel size='middle' items={items} />

      </Form>

      {/* 字符串形式的样式编辑 */}
      <CssEdit value={template2.css} open={open} onValueChange={cssChange} setOpen={setOpen} ref={cssEditRef} />

    </>
  )
}
export default React.memo(ListAtrr) 